<template>
	<view>
		<view class="volet_clos" :class="[show?classname:'']">
			<view class="top">
				<icon class="iconfont icon-RectangleCopy18" @click="hide" ></icon>
			</view>
			<view :style="{height: halfHeight}" style="margin-top: 15%;overflow: auto;">
				<slot />
			</view>

		</view>
	</view>

</template>

<script>
	export default {
		name:"drawer_x",
		data() {
			return {
				show: false,
				halfHeight: '90%'
			};
		},
		methods: {
			open() {
				this.show = true;
			},
			hide(){
				this.show=!this.show
				//slot  中内容先隐藏
				//setTimeout(()=>{
				//	this.$emit('onHide')
				//},600)
			},
			close(){
				this.show=false;
			}
		},
		props: ["classname"],
	}
</script>
<style>
	.top {
		width: 702rpx;
		margin: auto;
		text-align: right;
		position: fixed;
	}
	.volet_clos {
		transition: height 0.1s ease-out, opacity 0.6s ease-in, visibility 0.2s ease-in;
		bottom: 0;
		position: fixed;
		height: 0;
		width: 702rpx;
		background-color: rgba(243,243,243,1);
		z-index: 99;
		margin-left: 24rpx;
		border-radius: 10rpx;
	}
	.active900 {
		opacity: 1;
		visibility: 1;
		height: 35%;
		z-index: 9999;
	}
	.active {
		opacity: 1;
		visibility: 1;
		height: 100%;
		z-index: 9999;
	}
	.iconfont {
		font-size: 55rpx;
		margin-top: 10rpx;

	}
</style>